<template>
    <div class="file-time-axis">
        <div class="info">
            <form-item v-if="creator" class="form-item" label="创建人:" :value="creator" />
            <form-item v-if="createTime" class="form-item" label="创建时间:" :value="createTime" />
            <!-- <form-item v-if="remark" class="form-item" label="备注:" :value="remark" /> -->
        </div>
        <div class="file-content">
            <div class="file-item" v-for="(item, index) in formatTimeAxisList" :key="item.id"
                :class="{ 'last-file-item': index == formatTimeAxisList.length - 1 }">
                <div class="wrap">
                    <div class="line-box">
                        <div class="circle"></div>
                        <div class="line"></div>
                    </div>
                    <div class="img" @click="previewFile(item)">
                        <div class="bg"></div>
                        <img v-if="getMainFileType(item) == 'image'" :src="item.url" alt="">
                        <video v-if="getMainFileType(item) == 'video'" :src="item.url" width="100%" height="100%"></video>
                        <iframe v-if="getMainFileType(item) == 'pdf'" :src="item.url" frameborder="0"></iframe>
                    </div>
                    <div class="info">
                        <avue-form ref="form" v-model="item.form" :option="calcOption">
                            <template #duration="{ value }">
                                <span>{{ value }}秒</span>
                            </template>
                        </avue-form>
                    </div>
                </div>
            </div>
            <el-empty :style="isCenter ? { width: '100%' } : { paddingLeft: '145px' }" v-if="!formatTimeAxisList.length"
                description="暂无数据"></el-empty>
        </div>
        <el-image v-show="false" ref="elImage" :preview-src-list="srcList" />
    </div>
</template>

<script>
import FormItem from '@/components/FormItem/FormItem.vue'
import { MODULE_DICTID } from '@/const/modules'
export default {
    components: { FormItem },
    props: {
        timeAxisList: {
            type: Array,
            default: () => []
        },
        currentModuleObj: {
            type: Object,
            default: () => ({})
        },
        isCenter: {
            type: Boolean,
            default: true
        },
        moduleObj: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            MODULE_DICTID,
            tagList: [],
            srcList: []
        }
    },
    computed: {
        getMainFileType() {
            return (file) => {
                if (file.type == 'application/pdf' || file.type == 'pdf') return 'pdf'
                if (file.type && file.type.indexOf('/') != '-1') return file.type.split('/')[0]
                if (file.url && file.url.indexOf('.') != '-1') {
                    const extension = file.url.split('.').pop().toLowerCase();
                    const fileTypeMapping = {
                        jpg: 'image',
                        jpeg: 'image',
                        png: 'image',
                        gif: 'image',
                        mp4: 'video',
                        mov: 'video',
                        avi: 'video',
                        wmv: 'video',
                    };
                    const fileType = fileTypeMapping[extension] || '未知类型';
                    return fileType;
                }
                if (!file.type) return '未知类型'
            }
        },
        getTagLabel() {
            return (value) => {
                return (this.tagList.find(item => item.dictValue == value) ?? {}).dictLabel
            }
        },
        creator() {
            if (!this.currentModuleObj.value) return ''
            return (this.moduleObj[this.currentModuleObj.value] || {})?.createBy || "";
        },
        createTime() {
            if (!this.currentModuleObj.value) return ''
            return (this.moduleObj[this.currentModuleObj.value] || {})?.createTime || "";
        },
        remark() {
            if (!this.currentModuleObj.value) return ''
            return (this.moduleObj[this.currentModuleObj.value] || {})?.remark || "";
        },
        photoFormOption() {
            return require(`@/option/photoFormOption`).default(this)
        },
        videoFormOption() {
            const option = require(`@/option/videoFormOption`).default(this)
            option.column.splice(2, 0, {
                label: '视频时长',
                prop: 'duration'
            })
            return option
        },
        planOption() {
            return require(`@/option/planOption`).default(this)
        },
        materialsOption() {
            return require(`@/option/materialsOption`).default(this)
        },
        calcOption() {
            let option = this.photoFormOption;
            const dictId = parseInt(this.currentModuleObj.value)
            switch (dictId) {
                case 5:
                case 6:
                    option = this.planOption;
                    break;
                case 11:
                    option = this.materialsOption
                    break;
                case 12:
                    option = this.photoFormOption
                    break;
                case 13:
                    option = this.videoFormOption;
                    break;
                default:
                    option = this.materialsOption;
                    break;
            }
            option.column.forEach(item => {
                item.detail = true;
            });
            return option;
        },
        getCalcOptionKeys() {
            const arr = this.calcOption.column.map(item => {
                return {
                    prop: item.prop,
                    label: item.label
                }
            })
            return arr
        },
        formatTimeAxisList() {
            let list = this.deepClone(this.timeAxisList)
            list.forEach(file => {
                file.form = {}
                this.getCalcOptionKeys.forEach(item => {
                    if (item.prop == 'studioUrlList') {
                        if (file[item.prop]) {
                            file.form[item.prop] = file[item.prop].map(url => {
                                var segments = url.split("/")
                                var name = segments.pop()
                                return {
                                    name, url
                                }
                            })
                        }
                    } else {
                        file.form[item.prop] = file[item.prop]
                    }

                })
            })
            return list
        }
    },
    created() {
        this.getTagList()
    },
    methods: {
        getTagList() {
            this.getDicts('tag_type').then(res => {
                this.tagList = res.data
            })
        },
        previewFile(file) {
            this.srcList = [file]
            this.$refs.elImage.showViewer = true
        },
    }
}
</script>
<style scoped lang="scss">
@import '@/assets/styles/element-variables.scss';

.file-time-axis {
    .info {
        display: flex;
        margin-bottom: 8px;

        .form-item {
            height: 100%;
            font-size: 14px;
            margin: 0 10px;
            align-items: center;

            &:first-child {
                margin-left: 0;
            }
        }
    }

    .file-content {
        display: flex;
        flex-wrap: wrap;
    }

    .file-item {
        // width: var(--step-width);
        flex: 0 0 316px;
        --outline-width: 4px;
        --circle-diameter: 16px;
        --step-width: 100%;

        &.last-file-item {

            .line-box {
                .line {
                    display: none;
                }
            }
        }

        .line-box {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
            --all-circle: calc((var(--outline-width) * 2 + var(--circle-diameter)));
            --half-width: calc((var(--step-width) - var(--all-circle)) / 2);
            margin-bottom: 9px;

            .circle {
                margin: var(--outline-width);
                width: var(--circle-diameter);
                height: var(--circle-diameter);
                border-radius: 50%;
                background-color: $--color-primary;
                outline: var(--outline-width) solid rgba($--color-primary, .5);
                ;
            }

            .line {
                flex: 1;
                // width: calc(100% - var(--all-circle));
                // position: absolute;
                left: calc(var(--half-width) + var(--all-circle));
                top: calc(var(--outline-width) + (var(--circle-diameter) / 2));
                background-color: $--color-primary;
                height: 2px;
            }
        }

        .img {
            width: 192px;
            height: 108px;
            margin-bottom: 33px;
            position: relative;
            cursor: pointer;
            .bg {
                position: absolute;
                width: 100%;
                height: 100%;
            }

            iframe {
                width: 100%;
                height: 100%;
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .info {
            display: flex;
            flex-direction: column;
            // padding-right: 70px;

            .form-cell {
                font-size: 16px;
                display: flex;
                align-items: flex-start;

                span {
                    line-height: 20px;
                }

                & span:first-child {
                    width: 80px;
                    text-align: right;
                    color: rgba(#000, .45);
                }

                & span:last-child {
                    flex: 1;
                    color: rgba(#000, .85);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}

::v-deep {
    .info {
        .avue-form {
            .el-collapse-item__content {
                .avue-form__item-- {
                    background-color: transparent;
                }
            }
        }

    }

}
</style>